<!--
 * @Author: wangming
 * @Date: 2021-05-29 14:10:30
 * @LastEditors: wangming
 * @LastEditTime: 2022-02-07 17:04:06
 * @Description: file content
-->
<template>
  <div>
    <div class="ks-row-middle mb10 lh1">
      <div class="mr10 g3">查询条件</div>
      <i
        class="el-icon-circle-plus-outline iconcolor f20 poi"
        @click="addTag"
      ></i>
    </div>
    <div class="condition-list">
      <!-- @start="onStart"
        @end="onEnd" -->
      <draggable
        v-model="value.childrens"
        chosen-class="chosen"
        force-fallback="true"
        group="people"
        animation="300"
        handle=".mover"
      >
        <transition-group>
          <div
            class="relation-com-item"
            v-for="(item, i) in value.childrens"
            :key="item.key"
          >
            <div class="item">
              <i
                class="el-icon-delete iconcolor f20 poi mr10"
                @click="removeRelationCom(i)"
              ></i>
              <span
                :class="{
                  isDelete:
                    item.__config.id !== undefined &&
                    deletedIdList.includes(item.__config.id),
                }"
                :title="item.fieldName + '[' + item.fieldCode + ']'"
                >{{ item.fieldName + "[" + item.fieldCode + "]" }}</span
              >
            </div>
            <i class="mover el-icon-rank iconcolor f20 poi"></i>
          </div>
        </transition-group>
      </draggable>
    </div>
  </div>
</template>

<script>
import draggable from "vuedraggable";
import { cloneDeep, merge, differenceWith } from "lodash";
import { mapActions, mapGetters } from "vuex";
import { uuid } from "@/utils/common.js";
import SearchComList from "../../../../mainContent/__layouts/hlSearch/config";
import basicmixins from "../../basicmixins";
import AddCondition from "./addCondition";
import { TABLE_RETAIN_CODE } from "@/utils/const";
export default {
  mixins: [basicmixins],
  components: {
    draggable,
  },
  computed: {
    ...mapGetters(["getEntitymodelList"]),
    myEntitymodelList() {
      return this.getEntitymodelList.filter(
        (i) => i.code !== "deleted" && TABLE_RETAIN_CODE.indexOf(i.type) > -1
      );
    },
  },
  data() {
    return {
      deletedIdList: [],
    };
  },
  async created() {
    if (!this.value.childrens) {
      this.$set(this.value, "childrens", []);
    }
    let formId = this.value.__config.modelCode;
    let formList = this.value.childrens || [];
    this.$store.commit("changeFormList", formList);
    await this.setForm(formId);
    this.deletedIdList = differenceWith(
      this.value.childrens,
      this.myEntitymodelList,
      (child, item) => {
        return child.__config.id === item.id;
      }
    ).map((item) => item.__config.id);
  },
  watch: {
    async "value.__config.modelCode"(val) {
      this.value.childrens = [];
      val && (await this.setForm(val));
    },
  },
  methods: {
    ...mapActions(["setForm"]),
    removeRelationCom(index) {
      this.value.childrens.splice(index, 1);
    },
    async addTag() {
      AddCondition.addForm({
        myEntitymodelList: this.myEntitymodelList,
        children: this.value.childrens,
      }).then((o) => {
        (o || []).forEach((item) => {
          if (item.fieldCode && item.renderCom) {
            const field =
              this.getEntitymodelList.filter(
                (ele) => ele.code === item.fieldCode
              )[0] || {};
            const { id, type, config, relationType, localism } = field;
            let { value, modelCode } = (config && JSON.parse(config)) || {};
            this.value.childrens.push({
              ...item,
              ...merge(cloneDeep(SearchComList[item.renderCom]), {
                __config: {
                  id: id,
                  label: item.fieldName,
                  modelCode: modelCode,
                  relationType: relationType,
                  codeType: type,
                  valueTeam: value,
                  modelKey: this.value.__config.modelCode,
                  i18n: {
                    label: localism,
                  },
                },
              }),
              modelName: item.fieldCode,
              key:
                (SearchComList[item.renderCom].alias ||
                  SearchComList[item.renderCom].tagName.toLowerCase()) +
                "_" +
                uuid(5),
            });
          }
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.relation-com-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  margin-bottom: 5px;
  .item {
    span {
      max-width: 185px;
      display: inline-block;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      &.isDelete {
        text-decoration: line-through;
        text-decoration-color: red;
        text-decoration-style: double;
      }
    }
  }
}
</style>
